<template lang="html">
  <div class="">
    <header class="gd_css">
      <div class="ban_top">
          <div class="ban_cen clear">
              <i class="ui-icon-return" @click="back()"></i>
              <div class="gengduo">我的收藏</div>
              <span class="my_jd">编辑</span>
          </div>
      </div>
    </header>
    <section>

    <!--列表-->
    <div class="rmqz_css" style="margin-bottom:75px;">
      <ul>
        <div class="product_list_box" >
       <div  v-for='(item,index) of result' class="product_list" @click="push(item)">
          <div class="wrap">
             <dl class="">
               <dt>
                  <div class="img_box">
                     <img :src="item.imagePath" alt="">
                    <span>北京出发</span>
                  </div>
                  <strong v-if="item.product_rating_name == '大众型'" class="dz"></strong>
                  <strong v-if="item.product_rating_name == '精选型'" class="jx"></strong>
               </dt>
               <dd>
                 <ul>
                    <li>
                       <strong class="big_title">{{item.product_name}}</strong>
                    </li>
                    <li>
                       <strong class="title_des">{{item.sub_title}}</strong>
                    </li>
                    <li>
                       <p class="sign">
                          <em class="blue" v-if="item.lables.split">{{item.lables.split(',')[0]}}</em>
                          <span v-if="item.lables.split(',')[1] != null" v-show='hidden' class="white" >{{item.lables.split(',')[1]}}</span>

                          <span v-if="item.lables.split(',')[2] != null" v-show='hidden' class="white" >{{item.lables.split(',')[2]}}</span>
                       </p>
                    </li>
                    <li>
                       <p class="lately1">出发时间 {{item.trip_dates[0]}}</p>
                       <div class="price_box">
                          <strong class="oldprice"><i>￥</i> {{item.lowest_price}}</strong>
                          <p class="new_p">
                             <i class="newprice_p">￥</i>
                             <strong class="newprice1">{{item.lowest_price+"/人起"}}</strong>
                          </p>
                       </div>
                    </li>
                 </ul>
              </dd>
            </dl>
         </div>
       </div>
     </div>
      </ul>
      <p class="text">*产品列表展示仅为收藏时产品的售卖价格，如需购买请以当前详情展示价格为准。</p>
    </div>
</section>
  </div>
</template>

<script>
export default {
  data(){
    return{
      result:[],
      hidden: true
    }
  },
  methods:{
    back(){
      history.back()
    }
  },
  created(){

    console.log(this.$store.getters.fod);
    this.result = this.$store.getters.fod
  }
}
</script>

<style lang="css" scoped>
.gd_css {
    position: fixed;
    z-index: 999;
    left: 0px;
    top: 0px;
    width: 100%;
    padding-bottom: 54px;
}
.ban_top {
    padding: 10px 15px 0px 6px;
    background-color: #00b0ec;
}
.ban_cen {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
    display: inline-block;
    height: 40px;
    position: relative;
    overflow: hidden;
}
.ui-icon-return::before {
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: 13px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    vertical-align: middle;
    width: 13px;
    margin-left: 15px;
    cursor: pointer;
    position: absolute;
    left: 0px;
    z-index: 200;
    margin-top: 8px;
}
.gengduo {
    color: #fff;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    width: 200px;
    margin: auto;
    position: relative;
    text-align: center;
}
.my_jd {
    position: absolute;
    z-index: 100;
    right: 0px;
    top: 0px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    display: block;
    cursor: pointer;
    color: #FFF;
}
.clear::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
.rmqz_css {
    width: 100%;
    margin-bottom: 15px;
    margin-left: 0px;
}
.rmqz_css ul {
    margin-top: 10px;
    background-color: #FFF;
    padding-left: 10px;
    overflow: hidden;

}
.rmqz_css p.text {
    display: block;
    padding: 10px;
    color: #999;
    line-height: 20px;
    overflow: hidden;
    text-align: left;
}
/*产品展示*/
.product_list_box{
   width: 100%;
   margin-top: 7rem;
}
.product_list{
   width: 100%;
   height: 13rem;
   border-bottom: #e6e9ed solid 1px;
   background-color: #fff;
}
.product_list .wrap{
   width:95%;
   height:100%;
   margin: auto;
}
.product_list .wrap dl{
   width: 100%;
   display: flex;
}
.product_list .wrap dl>dt{
   margin-top: 1rem;
   width: 9.5rem;
   height:7rem;
   background-color: #f0efe8;
   border-radius: 0.2rem;
   /*position: relative;*/
}
.img_box{
   width: 9.5rem;
   height: 5.5rem;
   display: flex;
   flex-direction: column;
}
.product_list .wrap dl>dt span{
   font-size: 0.8rem;
}
.product_list .wrap dl>dt img{
   border-radius: 0.2rem;
   width: 100%;
   height: 100%;
}
.product_list .wrap dl>dd{
   /*width:20rem;
   height: 12rem;*/
   width:100%;
   margin-left: 0.7rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   /*background-color: lightgray;*/
}
.dz{
   width: 5rem;
   height: 2rem;
   /*position: absolute;*/
   top: 0.3rem;
   left: -0.5rem;
   background: url('../../static/imgs/dz.png') no-repeat;
   background-size: 4.5rem;
}
.jx{
   width: 5rem;
   height: 2rem;
   /*position: absolute;*/
   top: 0.3rem;
   left: -0.5rem;
   background: url('../../static/imgs/jx.png') no-repeat;
   background-size: 4.5rem;
}
.product_list .wrap dl>dd ul{
   margin-top: 1rem;
   padding:0;
   width: 100%;
   /*height: 100%;*/
   list-style: none;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-overflow: clip;
}
.product_list .wrap dl>dd ul li{
   text-align: left;
   width:100%;
   height:1.8rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   /*background-color: pink;*/
}
.product_list .wrap dl>dd ul li .big_title{
   display: inline-block;
   width: 20rem;
   /*background-color: pink;*/
   color: black;
   font-size: 1.5rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
.title_des{
   color: #999;
   font-size: 1rem;
   font-weight: lighter;
}
.sign{
   width: 100%;
   height:1.3rem;
   margin-top: 0.2rem;
   font-size: 0.8rem;
   font-family: "微软雅黑","宋体";
   display: flex;
   justify-content:flex-start;
}
.blue{
   width: 4rem;
   border-radius: 0.1rem;
   background-color: #00b0ec;
   color: #fff;
   padding:0.05rem;
   line-height: 1rem;
   text-align: center;
   font-style: normal;
}
.white{
   width: 5rem;
   display: inline-block;
   color: #0099a9;
   border:#0099a9 solid 0.07rem;
   border-radius: 0.2rem;
   padding:0.1rem;
   line-height: 0.9rem;
   text-align: center;
}
.none{
   display: none;
}
.lately1{
   color: #666;
   font-size: 0.8rem;
   text-overflow: clip;
}
.price_box{
   position: absolute;
   right: 0.8rem;
}
.price_box>p>i{
   font-style: normal;
   color: #ff6b01;
}
.newprice1{
   color: #ff6b01;
   font-size: 1.7rem;
   font-family: arial;
   font-weight: normal;
   text-align: right;
   /*background-color: pink;*/
   width:8rem;
   /*float: right;*/
}
.oldprice{
   float: right;
   color: #666;
   font-size: 0.5rem;
   text-decoration: line-through;
}
.new_p{
   width: 8rem;
   position: absolute;
   margin-top: 1rem;
   right: 0;
}
.new_p .newprice_p{
   float: left;
}
</style>
